<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!-- 按顺序导入相关的js和css -->
		<link rel="stylesheet" href="../lib/themes/default/easyui.css" type="text/css"/>
		<link rel="stylesheet" href="../lib/themes/icon.css" />
		
		<script type="text/javascript" src="../lib/jquery/jquery-1.11.3.min.js"></script>
		<script type="text/javascript" src="../lib/jquery/jquery.easyui.min.js"></script>
		
		<script>
			
		</script>
		
	</head>
	<body>
		
		<div id="" class="easyui-layout" fit="true">
			<!-- 北 -->
		    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;">
		    	
		    </div>   
		    
		    <!-- 南 -->
		    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;">
		    	
		    </div>   
		    
		    <!-- 东 -->
		    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;">
		    	
		    </div>   
		    
		    
		    <!-- 西 -->
		    <div id="" data-options="region:'west',title:'West',split:false" style="width:300px;" >
		    	<!-- Accordion（分类） -->
		    	<div id="accordionID" class="easyui-accordion" fit="true">
		    		<!-- According 选项 -->
		    		<div title="部门管理" data-options="iconCls:'icon-save'" selected="false">
		    			<!-- 几个按钮样式 --> 
		    			<a id="btn_add" href="#" 
		    				class="easyui-linkbutton" 
		    				data-options="iconCls:'icon-add'"
		    				style="width:300px;">
		    				增加部门
		    			</a><br/>
						<a id="btn_find" href="#" 
							class="easyui-linkbutton" 
							data-options="iconCls:'icon-search'"
							style="width:300px;">
							查询部门
						</a><br/>
						<a id="btn_update" href="#" 
							class="easyui-linkbutton" 
							data-options="iconCls:'icon-edit'"
							style="width:300px;">
							修改部门
						</a><br/>
						<a id="btn_delete" href="#" 
							class="easyui-linkbutton" 
							data-options="iconCls:'icon-remove'"
							style="width:300px;">
							删除部门
						</a><br/>
		    		</div>
		    		<div title="人事管理" data-options="iconCls:'icon-reload'">
		    			
		    			<!-- 使用树形结构显示 -->
	    				<ul id="treeID" class="easyui-tree">
	    					<li>
	    						<span>人事查询</span>
	    						<ul>
	    							<li>查询所有</li><li>模糊查询</li><li>精确查询</li>
	    						</ul>
	    					</li>
	    					<li>
	    						<span>人事操作</span>
	    						<ul>
	    							<li>更改部门</li><li>查看公告</li><li>发送公告</li>
	    						</ul>
	    					</li>
	    				</ul>
	    			
		    		</div>
		    		<div title="客户管理" data-options="iconCls:'icon-remove'">
		    			
		    		</div>
		    		<div title="权限管理" data-options="iconCls:'icon-edit'">
		    			
		    		</div>
		    		<div title="报表管理" data-options="iconCls:'icon-print'">
		    			
		    		</div>
		    		<div title="帮助" data-options="iconCls:'icon-help'">
		    			
		    		</div>
		    	</div>
		    </div>   
		    
		    <!-- 中心 -->
		    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
		    	<div id="tabsID" 
		    		class="easyui-tabs"
		    		data-options="plain:true,border:false,selected:-1,fit:true">
		    		
		    	</div>
		    </div>   
		</div>  
		
		<!-- 使用 JS 添加一些事件和According 控件 -->
		<script>
		//=========  $(选择器).组件名("方法名",参数);   ============
		$(function(){
			//增加一个面板
			//$('selector').plugin('method', parameter); 
			$("#accordionID").accordion("add",{
				"title" : "JS添加标题",
				"iconCls" : "icon-add",
				"content" : "武汉",
				"selected" : false
			});
			//休息3秒
			window.setTimeout(function(){
				//移除标题1面板
				$("#accordionID").accordion("remove",6);
				//取消面板1选中
				$("#accordionID").accordion("unselect",0);
				//面板1选中
				$("#accordionID").accordion("select",0);
			},3000);
			
			//点击按钮的时候增加对应的tabs选项卡
			$("a").click(function(){
				//获得按钮的title值
				var title = $(this).text();
				title = $.trim(title);
				if("增加部门" == title){
					//判断有没有打开的选项卡
					var flg = $("#tabsID").tabs("exists",title);
					//如果未打开
					if(!flg){
						//打开对应的选项卡
						$("#tabsID").tabs("add",{
							"title":title,
							"closable":true,
							"iconCls" : "icon-add",
							"href":"#"
						});
					}
				}else if("查询部门" == title){
					//判断有没有打开的选项卡
					var flg = $("#tabsID").tabs("exists",title);
					//如果未打开
					if(!flg){
						//打开对应的选项卡
						$("#tabsID").tabs("add",{
							"title":title,//标题
							"closable":true,//是否可关闭
							"iconCls" : "icon-search",//图标
							"href":"./listAllDept.html"//超链接
						});
					}
				}else if("修改部门" == title){
					//判断有没有打开的选项卡
					var flg = $("#tabsID").tabs("exists",title);
					//如果未打开
					if(!flg){
						//打开对应的选项卡
						$("#tabsID").tabs("add",{
							"title":title,
							"closable":true,
							"iconCls" : "icon-edit",
							"href":"#"
						});
					}
				}else if("删除部门" == title){
					//判断有没有打开的选项卡
					var flg = $("#tabsID").tabs("exists",title);
					//如果未打开
					if(!flg){
						//打开对应的选项卡
						$("#tabsID").tabs("add",{
							"title":title,
							"closable":true,
							"iconCls" : "icon-remove",
							"href":"#"
						});
					}
				}
			});
			
		});
		</script>
		
		<!-- 使用 JS 添加 tree 的点击事件  -->
		<script>
			$(function(){
				//一开始收起所有的选项
				$("#treeID").tree("collapseAll");
			});
			//点击事件
			$("#treeID").tree({
				onClick : function(node){
					//可以在这里打开选项卡
					alert("node.text:"+node.text);
				}
			});
			
			$("treeID").tree({
				"cascadeCheck" :true,
			});
		</script>
		
		
	</body>
</html>
